import { useSelector, useDispatch } from 'react-redux'
import {Icon, View} from "@tarojs/components";
import LTitle from './components/title'
import Nr from './components/nr'
import Footer from "./components/footer";
import { setShow } from '../../../features/counter/counterSlice'
import './css.scss'

function Nr_components () {
  return 'Nr_components'
}
function Footer_components () {
  return (
    <View>Footer_components</View>
  )
}
export default function DuiHuaKuang () {
  const {
    show,
    Nrs,
    Footers,
    title,
    heiddenClose,
    TitleCom
  } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  function closeDuiHuaKuang () {
    dispatch(setShow({
      show: false
    }))
  }
  return (
    <View className={`duiHuaKuang-box zhezhao ${show ? 'show': 'hidden'}`}>
      <View className='duiHuaKuang-body'>
        {
          heiddenClose ? '' : <View className='iconbox ' onClick={closeDuiHuaKuang}>
            <Icon size='20' type='clear' color='red' />
          </View>
        }
        <LTitle TitleCom={TitleCom} title={title} />
        <Nr component={Nrs || Nr_components} />
        <Footer component={Footers || Footer_components} />
      </View>
    </View>
  )
}
